<!DOCTYPE html>
<HTML lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<HEAD>
    <TITLE>菜单信息管理</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" th:href="@{/mystatic/bootstrap/css/bootstrap.min-custom.css}">
    <link rel="stylesheet" th:href="@{/mystatic/progressbar/css/mprogress.css}">
    <link rel="stylesheet" th:href="@{/mystatic/ztree/css/bootstrapztree.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/mystatic/ztree/css/personality.css}" type="text/css">
    <script th:src="@{/mystatic/ztree/js/jquery.min.js}"></script>
    <script th:src="@{/mystatic/ztree/js/jquery.ztree.core.js}"></script>
    <script th:src="@{/mystatic/ztree/js/jquery.ztree.excheck.js}"></script>
    <script th:src="@{/mystatic/ztree/js/jquery.ztree.exedit.js}"></script>
    <script th:src="@{/mystatic/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/mystatic/js/ajaxFactory.js}"></script>
    <script th:src="@{/mystatic/js/jqAlert.js}"></script>
    <script th:src="@{/mystatic/progressbar/js/mprogress.js}"></script>
    <script th:src="@{/mystatic/progressbar/js/init-mprogress.js}"></script>
    <script th:src="@{/mystatic/js/mustache/mustache.min.js}"></script>
    <script th:src="@{/mystatic/js/config.js}"></script>
    <SCRIPT type="text/javascript">
        var controllerPrefix = "cmSysMenu";
        var nowUpTreeNode;
        //当前添加节点时候的父类id 根节点为0
        var nowParentId = 0;
        //当前添加节点时候父类对象 根节点为null
        var nowParentNode = null;
        var isAddButton = false;
        var setting = {
            view: {
                addDiyDom: addDiyDom,
                selectedMulti: false,
                //不显示连线
                showLine: false
            },
            callback: {
                onClick: zTreeOnClick,
                onDrop: zTreeOnDrop
            },
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "menuId",
                    pIdKey: "parentId",
                    rootPId: 0
                }
            },
            edit: {
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false,
                drag: {
                    prev: canPreNext,
                    next: canPreNext,
                    inner: canInner
                }
            }
        };

        var zNodes = [
            /*{menuId: "12345678901234567890", parentId: 0, menuName: "[core] 基本功能 演示", open: true, urlAddress: null},
            {menuId: 101, parentId: "12345678901234567890", name: "最简单的树 --  标准 JSON 数据", urlAddress: "123"},*/
        ];

        $(document).ready(function () {
            initTree();
        });

        function initTree() {
            var userInfo = JSON.parse(sessionStorage.getItem(USER_INFO_KEY));
            //动态获取树形菜单
            $z.ajaxGet({
                url: basePath + "/" + controllerPrefix + "/list-all",
                async: false,
                data: {
                    roleId: userInfo.roleId,
                    isAll: "YES"
                },
                beforeSend: function () {
                    InitMprogress();
                },
                success: function (data) {
                    $z.dealCommonResult(data, function () {
                        //赋值
                        zNodes = data.data;
                        for (var i in zNodes) {
                            if (zNodes[i].isButton === 0) {
                                zNodes[i].open = true;
                            }
                        }
                        //初始化
                        $.fn.zTree.init($("#ztree"), setting, zNodes);
                        MprogressEnd();
                        showButtonByRole();
                    });
                }
            });
        }

        function canPreNext(treeId, nodes, targetNode) {
            var checkFlag = nodes[0].level === targetNode.level && nodes[0].parentId === targetNode.parentId && nodes[0].level !== 2 && targetNode.level !== 2
            if (targetNode && checkFlag) {
                var canMove = false;
                $z.ajaxPost({
                    url: basePath + "/cmSysMenu/can-move",
                    async: false,
                    data: {
                        moveMenu: nodes[0],
                        targetMenu: targetNode,
                    },
                    success: function (data) {
                        canMove = data.data;
                    }
                });
                return checkFlag && canMove;
            }
            return false;
        }

        function canInner(treeId, nodes, targetNode) {
            //只能往根节点里拖
            if (targetNode && nodes[0].level !== 2 && nodes[0].level > targetNode.level) {
                return true;
            }
            return false;
        }

        /**
         * 拖拽触发的函数
         */
        function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
            if (!moveType) {
                return;
            }
            //请求移动节点接口
            $z.ajaxPost({
                url: basePath + "/cmSysMenu/remove-node",
                data: {
                    moveMenu: treeNodes[0],
                    targetMenu: targetNode,
                    moveType: moveType
                },
                beforeSend: function () {
                    InitMprogress();
                },
                success: function (data) {
                    $z.dealCommonResult(data, function () {
                        var treeObj = $.fn.zTree.getZTreeObj("ztree");
                        //同步更新
                        if (moveType == "inner") {
                            //更新被移动节点的parentId
                            treeNodes[0].parentId = targetNode.menuId;
                            treeNodes[0].orderNo = data.data.orderNo;
                            treeObj.updateNode(treeNodes[0]);
                        } else {
                            var moveNo = treeNodes[0].orderNo;
                            var targetNo = targetNode.orderNo;
                            treeNodes[0].orderNo = targetNo;
                            targetNode.orderNo = moveNo;
                            treeObj.updateNode(treeNodes[0]);
                            treeObj.updateNode(targetNode);
                        }
                        MprogressEnd();
                    });
                }
            });
        };

        /**
         * 菜单后面添加按钮
         */
        function addDiyDom(treeId, treeNode) {
            //获取当前节点对象
            var aObj = $("#" + treeNode.tId + "_a");
            console.log(treeNode);
            //添加删除按钮
            if ($("#del_" + treeNode.menuId).length > 0) return;
            var delStr = "<span tagId='delTag' class='span-button' style='' id='del_" + treeNode.menuId + "'>删除</span>";
            aObj.after(delStr);
            var delBtn = $("#del_" + treeNode.menuId);
            if (delBtn) delBtn.bind("click", function () {
                //如果删除的是按钮
                if (treeNode.isButton === 1) {
                    //弹出确认框
                    $.MsgBox.Confirm("温馨提示", "执行删除后将无法恢复，确定继续吗？", function () {
                        $z.ajaxPost({
                            url: basePath + "/cmSysButton/delete",
                            data: {
                                buttonId: treeNode.menuId,
                                canDel: treeNode.canDel
                            },
                            beforeSend: function () {
                                InitMprogress();
                            },
                            success: function (data) {
                                $z.dealCommonResult(data, function () {
                                    //同步删除树节点
                                    var treeObj = $.fn.zTree.getZTreeObj("ztree");
                                    treeObj.removeNode(treeNode);
                                    treeObj.removeChildNodes(treeNode);
                                    MprogressEnd();
                                });
                            }
                        });
                    });
                    //如果删除的是菜单
                } else {
                    //弹出确认框
                    $.MsgBox.Confirm("温馨提示", "执行删除后将同步删除其子菜单和相关按钮，确定继续吗？", function () {
                        $z.ajaxPost({
                            url: basePath + "/cmSysMenu/delete",
                            data: {
                                menuId: treeNode.menuId,
                                canDel: treeNode.canDel
                            },
                            beforeSend: function () {
                                InitMprogress();
                            },
                            success: function (data) {
                                $z.dealCommonResult(data, function () {
                                    //同步删除树节点
                                    var treeObj = $.fn.zTree.getZTreeObj("ztree");
                                    treeObj.removeNode(treeNode);
                                    treeObj.removeChildNodes(treeNode);
                                    MprogressEnd();
                                });
                            }
                        });
                    });
                }
            });
            //如果是二级菜单
            if (treeNode.level === 1) {
                //二级菜单可以添加操作节点
                var addButtonStr = "<span tagId='addButtonTag' class='span-button' style='' id='addButton_" + treeNode.menuId + "'>添加操作</span>";
                aObj.after(addButtonStr);
                var addOperation = $("#addButton_" + treeNode.menuId);
                if (addOperation) addOperation.bind("click", function () {
                    //添加操作
                    addButton(treeNode.menuId, treeNode);
                });
            }
            //如果是操作节点
            if (treeNode.level == 2) {
                return;
            }
            //二级菜单不能添加二级菜单
            if (treeNode.level == 1) {
                return;
            }
            if ($("#add_" + treeNode.menuId).length > 0) return;
            var addStr = "<span tagId='addSecondMenuTag' class='span-button' id='add_" + treeNode.menuId + "'>添加二级菜单</span>";
            aObj.after(addStr);
            var addBtn = $("#add_" + treeNode.menuId);
            if (addBtn) addBtn.bind("click", function () {
                addSecondMenu(treeNode.menuId, treeNode);
            });
        }

        /**
         * 添加一级菜单
         */
        function addFirstMenu() {
            //显示添加模态框
            $("#urlAddress-insert-group").hide();
            $("#buttonName-insert-group").hide();
            $("#buttonTagId-insert-group").hide();
            $("#menuName-insert-group").show();
            $("#menuIcon-insert-group").show();
            $("#menuName-insert").val('');
            $("#menuIcon-insert").val('');
            $('#addModal').modal('show');
            isAddButton = false;
            nowParentId = 0;
            nowParentNode = null;
        }

        /**
         * 添加二级菜单
         */
        function addSecondMenu(parentId, treeNode) {
            //显示添加模态框
            $("#buttonName-insert-group").hide();
            $("#buttonTagId-insert-group").hide();
            $("#menuIcon-insert-group").hide();
            $("#urlAddress-insert-group").show();
            $("#menuName-insert-group").show();
            $("#urlAddress-insert").val('');
            $("#menuName-insert").val('');
            //更新当前的parentId
            nowParentId = parentId;
            nowParentNode = treeNode;
            $('#addModal').modal('show');
            isAddButton = false;
        }

        /**
         * 添加操作按钮
         */
        function addButton(parentId, treeNode) {
            //显示添加模态框
            $("#menuIcon-insert-group").hide();
            $("#urlAddress-insert-group").hide();
            $("#menuName-insert-group").hide();
            $("#buttonName-insert-group").show();
            $("#buttonTagId-insert-group").show();
            $("#buttonName-insert").val('');
            $("#buttonTagId-insert").val('');
            //更新当前的parentId
            nowParentId = parentId;
            nowParentNode = treeNode;
            $('#addModal').modal('show');
            isAddButton = true;
        }


        /**
         * 确认添加菜单
         */
        function confirmAddMenu() {
            //调用后台添加菜单
            var url = isAddButton ? basePath + "/cmSysButton/add" : basePath + "/" + controllerPrefix + "/add";
            var data = isAddButton ? {
                menuId: nowParentId,
                buttonName: $("#buttonName-insert").val(),
                moduleTagId: $("#buttonTagId-insert").val()
            } : {
                parentId: nowParentId,
                menuName: $("#menuName-insert").val(),
                menuIcon: $("#menuIcon-insert").val(),
                urlAddress: $("#urlAddress-insert").val()
            }
            $z.ajaxPost({
                url: url,
                data: data,
                beforeSend: function () {
                    InitMprogress();
                },
                success: function (data) {
                    $z.dealCommonResult(data, function () {
                        data = data.data;
                        //动态添加节点
                        var treeObj = $.fn.zTree.getZTreeObj("ztree");
                        treeObj.addNodes(nowParentNode, data);
                        MprogressEnd();
                        $('#addModal').modal('hide');
                    });
                }
            });
        }

        /**
         * 节点被点击时触发的事件
         */
        function zTreeOnClick(event, treeId, treeNode) {
            //判断点击的是否是按钮节点显示不同的详情
            //如果是一级菜单
            if (treeNode.level === 0) {
                $("#menuName-update").val(treeNode.name);
                $("#menuIcon-update").val(treeNode.menuIcon);
                $("#menuIcon-update-group").show();
                $("#menuName-update-group").show();
                $("#urlAddress-update-group").hide();
                $("#buttonName-update-group").hide();
                $("#buttonTagId-update-group").hide();
                //如果是二级菜单
            } else if (treeNode.level === 1) {
                $("#menuName-update").val(treeNode.name);
                $("#urlAddress-update").val(treeNode.urlAddress);
                $("#menuName-update-group").show();
                $("#urlAddress-update-group").show();
                $("#menuIcon-update-group").hide();
                $("#buttonName-update-group").hide();
                $("#buttonTagId-update-group").hide();
                //操作节点
            } else {
                $("#buttonName-update").val(treeNode.name);
                $("#buttonTagId-update").val(treeNode.moduleTagId);
                $("#buttonName-update-group").show();
                $("#buttonTagId-update-group").show();
                $("#menuName-update-group").hide();
                $("#urlAddress-update-group").hide();
                $("#menuIcon-update-group").hide();
            }
            nowUpTreeNode = treeNode;
            $('#updateModal').modal('show');
        }

        /**
         * 确认修改
         */
        function confirmUp() {
            //如果更新的是按钮
            if (nowUpTreeNode.level === 2) {
                var buttonName = $("#buttonName-update").val();
                var moduleTagId = $("#buttonTagId-update").val();
                $z.ajaxPost({
                    url: basePath + "/cmSysButton/update",
                    data: {
                        buttonId: nowUpTreeNode.menuId,
                        menuId: nowUpTreeNode.parentId,
                        buttonName: buttonName,
                        moduleTagId: moduleTagId
                    },
                    beforeSend: function () {
                        InitMprogress();
                    },
                    success: function (data) {
                        $z.dealCommonResult(data, function () {
                            MprogressEnd();
                            var treeObj = $.fn.zTree.getZTreeObj("ztree");
                            var treeNode = nowUpTreeNode;
                            //賦值
                            treeNode.name = buttonName;
                            treeNode.moduleTagId = moduleTagId;
                            //同步更新节点
                            treeObj.updateNode(treeNode);
                            $('#updateModal').modal('hide');
                        });
                    }
                });
                //更新的是菜单
            } else {
                var menuName = $("#menuName-update").val();
                var menuIcon = $("#menuIcon-update").val();
                var urlAddress = $("#urlAddress-update").val();
                $z.ajaxPost({
                    url: basePath + "/cmSysMenu/update",
                    data: {
                        menuId: nowUpTreeNode.menuId,
                        menuName: menuName,
                        menuIcon: menuIcon,
                        urlAddress: urlAddress
                    },
                    beforeSend: function () {
                        InitMprogress();
                    },
                    success: function (data) {
                        $z.dealCommonResult(data, function () {
                            MprogressEnd();
                            var treeObj = $.fn.zTree.getZTreeObj("ztree");
                            var treeNode = nowUpTreeNode;
                            //賦值
                            treeNode.name = menuName;
                            treeNode.menuIcon = menuIcon;
                            treeNode.urlAddress = urlAddress;
                            //同步更新节点
                            treeObj.updateNode(treeNode);
                            $('#updateModal').modal('hide');
                        });
                    }
                })
            }
        }

    </SCRIPT>
</HEAD>

<BODY>
<hr/>
<p style="margin-left: 10px"><b>修改，删除或改变菜单顺序后，刷新浏览器页面可同步更新左侧菜单栏！</b></p>
<button tagId='addFirstMenuTag' style="margin-left: 10px" type="button" class="btn btn-success btn-sm" onclick="addFirstMenu()">添加一级菜单</button>
<hr/>
<ul id="ztree" class="ztree"></ul>
<!--添加模态框-->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addModalLabel">添加信息</h4>
            </div>
            <div class="modal-body" id="addModalBody">
                <form>
                    <div class="form-group" id="menuName-insert-group">
                        <label for="menuName-insert" class="control-label">菜单名称&ensp;<label style="color: red">*</label></label>
                        <input type="text" class="form-control" id="menuName-insert"/>
                    </div>
                    <div class="form-group" id="menuIcon-insert-group">
                        <label for="menuIcon-insert" class="control-label">菜单样式</label>
                        <input type="text" class="form-control" id="menuIcon-insert"/>
                    </div>
                    <div class="form-group" id="urlAddress-insert-group">
                        <label for="urlAddress-insert" class="control-label">菜单地址&ensp;<label style="color: red">*</label></label>
                        <input type="text" class="form-control" id="urlAddress-insert"/>
                    </div>
                    <div class="form-group" id="buttonName-insert-group">
                        <label for="buttonName-insert" class="control-label">操作名称&ensp;<label style="color: red">*</label></label>
                        <input type="text" class="form-control" id="buttonName-insert"/>
                    </div>
                    <div class="form-group" id="buttonTagId-insert-group">
                        <label for="buttonTagId-insert" class="control-label">操作标识&ensp;<label style="color: red">*</label></label>
                        <input type="text" class="form-control" id="buttonTagId-insert"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="confirmAddMenu()">确认</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 菜单详情保存模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="updateModalLabel">查看详情</h4>
            </div>
            <div class="modal-body" id="updateModalBody">
                <form>
                    <div class="form-group" id="menuName-update-group">
                        <label for="menuName-update" class="control-label">菜单名称&ensp;<label style="color: red">*</label></label>
                        <input type="text" class="form-control" id="menuName-update"/>
                    </div>
                    <div class="form-group" id="menuIcon-update-group">
                        <label for="menuIcon-update" class="control-label">菜单样式</label>
                        <input type="text" class="form-control" id="menuIcon-update"/>
                    </div>
                    <div class="form-group" id="urlAddress-update-group">
                        <label for="urlAddress-update" class="control-label">菜单地址&ensp;<label style="color: red">*</label></label>
                        <input type="text" class="form-control" id="urlAddress-update"/>
                    </div>
                    <div class="form-group" id="buttonName-update-group">
                        <label for="buttonName-update" class="control-label">操作名称&ensp;<label style="color: red">*</label></label>
                        <input type="text" class="form-control" id="buttonName-update"/>
                    </div>
                    <div class="form-group" id="buttonTagId-update-group">
                        <label for="buttonTagId-update" class="control-label">操作标识&ensp;<label style="color: red">*</label></label>
                        <input type="text" class="form-control" id="buttonTagId-update"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button tagId='upTag' type="button" class="btn btn-primary" onclick="confirmUp()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</BODY>
</HTML>